<template>
  <view class="page-container" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
    <view class="fixed-header">
      <!-- 顶部搜索栏 -->
      <view class="header">
        <view class="title-row">
          <view class="tabs-container">
            <view class="tab-item" :class="{active: topTabActive === 0}" @click="goToTab(0)">
              <text class="title" :class="{active: topTabActive === 0}">查岗位</text>
              <view v-if="topTabActive === 0" class="underline"></view>
            </view>
            <view class="divider"></view>
            <view class="tab-item" :class="{active: topTabActive === 1}" @click="goToTab(1)">
              <text class="title" :class="{active: topTabActive === 1}">找名企</text>
              <view v-if="topTabActive === 1" class="underline"></view>
            </view>
          </view>
          <view class="header-actions">
            <image class="actions-icon" src="/static/header-actions.png"></image>
          </view>
        </view>
  <view class="search-row">
    <view class="ai-entry-outside" @click="navigateToAIChat">
      <image class="ai-entry-icon" src="/static/aichat.png"></image>
    </view>
    <view class="search-bar" @click="navigateToSearch">
      <view>
        <image class="search-icon" src="/static/search.1 1@1.5x.png"></image>
      </view>
      <input class="search-input" placeholder="查岗位 找工作 练面试，就用职观AI" :disabled="true" />
    </view>
  </view>
      </view>

      <!-- 金刚位卡片 -->
      <view class="kingkong-bar">
        <view class="kingkong-item" 
          v-for="item in kingkongList" 
          :key="item.text"
          @click="handleKingkongClick(item.text)"
        >
          <image :src="item.icon" class="kingkong-img" />
          <text class="kingkong-text">{{ item.text }}</text>
        </view>
      </view>

      <!-- 一级筛选tab -->
      <view class="filter-row">
        <scroll-view 
          scroll-x 
          class="filter-scroll-row" 
          show-scrollbar="false" 
          enable-flex="true"
          enhanced="true"
          bounces="false"
          scroll-with-animation="true"
        >
          <view class="filter-btn"
            v-for="(item, idx) in jobTypeTabs"
            :key="idx"
            :class="{active: activeJobType === item}"
            @click="activeJobType = item"
          >
            {{ item }}
          </view>
        </scroll-view>
      </view>

      <!-- 金刚位功能区（放在一级筛选按钮上方） -->

    </view>

    <!-- 子筛选按钮 -->
    <view class="sub-filter-row">
      <view
        class="sub-filter-btn"
        :style="isTabExpanded(sub.key) ? 'color:#00b386;font-weight:700;background:none;' : 'background:none;'"
        :class="{
          selected: subFilterSelected[sub.key] !== '不限' || isTabExpanded(sub.key),
          expanded: isTabExpanded(sub.key)
        }"
        v-for="sub in subFilters"
        :key="sub.key"
        @click="
          sub.key === 'city'
            ? openCityPopup()
            : sub.key === 'degree'
              ? openEducationPopup()
              : sub.key === 'exp'
                ? openExperiencePopup()
                : sub.key === 'salary'
                  ? openSalaryPopup()
                  : toggleSubFilter(sub.key)
        "
      >
        <text v-if="sub.key !== 'city'">
          {{ subFilterSelected[sub.key] === '不限' ? sub.label : subFilterSelected[sub.key] }}
        </text>
        <text v-else>
          {{ cityBtnText() }}
        </text>
        <text
          class="arrow"
          :style="isTabExpanded(sub.key) ? 'color:#00b386;font-weight:700;' : ''"
        >{{ isTabExpanded(sub.key) ? '▲' : '▼' }}</text>
        <!-- 下拉菜单（非城市/学历/经验/薪资） -->
        <view v-if="subFilterVisible === sub.key && !['city','degree','exp','salary'].includes(sub.key)" class="sub-filter-dropdown">
          <view class="dropdown-option" v-for="opt in sub.options" :key="opt" @click.stop="selectSubFilter(sub.key, opt)">
            {{ opt }}
          </view>
        </view>
      </view>
    </view>

    <!-- 美团风格城市弹窗 -->
    <view v-if="cityPopupVisible" class="city-popup-mask" @click="closeCityPopup">
      <view class="city-popup city-popup-bottom" @click.stop>
        <view class="city-popup-header">
          <view class="city-popup-title">选择城市</view>
          <view class="city-popup-close" @click="closeCityPopup">×</view>
        </view>
        <view class="city-popup-content">
          <!-- 有省份分组 -->
          <view v-if="Array.isArray(sortedLocationData) && typeof sortedLocationData[0] === 'object' && sortedLocationData[0].province" class="province-list">
            <!-- 全部省份选项 -->
            <view
              :class="['province-item', {active: selectedProvince === '全部'}]"
              @click="selectAllProvince"
            >
              全部
            </view>
            <view
              v-for="item in sortedLocationData"
              :key="item.province"
              :class="['province-item', {active: selectedProvince === item.province}]"
              @click="selectProvince(item.province)"
            >{{ item.province }}</view>
          </view>
          <view class="city-list">
            <!-- 有省份分组 -->
            <view v-if="Array.isArray(sortedLocationData) && typeof sortedLocationData[0] === 'object' && sortedLocationData[0].province">
              <view
                :class="['city-item', {active: selectedCities.includes('全部城市')}]"
                @click="toggleAllCities"
              >
                <text>全部城市</text>
              </view>
              <view
                v-for="city in (sortedLocationData.find(i => i.province === selectedProvince)?.cities || [])"
                :key="city"
                :class="['city-item', {active: selectedCities.includes(city)}]"
                @click="toggleCity(city)"
              >
                <text>{{ city }}</text>
              </view>
            </view>
            <!-- 仅有城市 -->
            <view v-else>
              <view
                :class="['city-item', {active: selectedCities.includes('全部城市')}]"
                @click="toggleAllCities"
              >
                <text>全部城市</text>
              </view>
              <view
                v-for="city in sortedLocationData"
                :key="city"
                :class="['city-item', {active: selectedCities.includes(city)}]"
                @click="toggleCity(city)"
              >
                <text>{{ city }}</text>
              </view>
            </view>
          </view>
        </view>
        <view class="city-popup-footer">
          <button class="city-popup-clear" @click="clearCity" :disabled="!selectedCities.length">清除</button>
          <button class="city-popup-confirm" :disabled="selectedCities.length === 0 && selectedProvince !== '全部'" @click="confirmCity">确定</button>
        </view>
      </view>
    </view>

    <!-- 学历弹窗 -->
    <view v-if="educationPopupVisible" class="city-popup-mask" @click="closeEducationPopup">
      <view class="city-popup city-popup-bottom" @click.stop>
        <view class="city-popup-header">
          <view class="city-popup-title">选择学历</view>
          <view class="city-popup-close" @click="closeEducationPopup">×</view>
        </view>
        <view class="popup-content-center">
          <view
            v-for="item in educationData"
            :key="item"
            :class="['center-item', {active: selectedEducations.includes(item)}]"
            @click="toggleEducation(item)"
          >{{ item }}</view>
        </view>
        <view class="city-popup-footer">
          <button class="city-popup-clear" @click="clearEducation">清除</button>
          <button class="city-popup-confirm" @click="confirmEducation">确定</button>
        </view>
      </view>
    </view>

    <!-- 经验弹窗 -->
    <view v-if="experiencePopupVisible" class="city-popup-mask" @click="closeExperiencePopup">
      <view class="city-popup city-popup-bottom" @click.stop>
        <view class="city-popup-header">
          <view class="city-popup-title">选择经验</view>
          <view class="city-popup-close" @click="closeExperiencePopup">×</view>
        </view>
        <view class="popup-content-center">
          <view
            v-for="item in experienceData"
            :key="item"
            :class="['center-item', {active: selectedExperiences.includes(item)}]"
            @click="toggleExperience(item)"
          >{{ item }}</view>
        </view>
        <view class="city-popup-footer">
          <button class="city-popup-clear" @click="clearExperience">清除</button>
          <button class="city-popup-confirm" @click="confirmExperience">确定</button>
        </view>
      </view>
    </view>

    <!-- 薪资弹窗 -->
    <view v-if="salaryPopupVisible" class="city-popup-mask" @click="closeSalaryPopup">
      <view class="city-popup city-popup-bottom" @click.stop>
        <view class="city-popup-header">
          <view class="city-popup-title">选择薪资</view>
          <view class="city-popup-close" @click="closeSalaryPopup">×</view>
        </view>
        <view class="popup-content-center">
          <view
            v-for="item in salaryData"
            :key="item"
            :class="['center-item', {active: selectedSalaries.includes(item)}]"
            @click="toggleSalary(item)"
          >{{ item }}</view>
        </view>
        <view class="city-popup-footer">
          <button class="city-popup-clear" @click="clearSalary">清除</button>
          <button class="city-popup-confirm" @click="confirmSalary">确定</button>
        </view>
      </view>
    </view>

    <scroll-view 
      class="scrollable-content" 
      scroll-y="true"
      refresher-enabled="true"
      refresher-threshold="45"
      refresher-default-style="white"
      refresher-background="#f0f0f0"
      :refresher-triggered="isRefreshing"
      @refresherrefresh="onRefresh"
      @refresherrestore="onRefreshRestore"
    >
      <!-- 职位列表骨架屏 -->
      <view v-if="isLoading" class="skeleton-list">
        <view v-for="n in 6" :key="n" class="skeleton-card">
          <view class="skeleton-title"></view>
          <view class="skeleton-row">
            <view class="skeleton-company"></view>
            <view class="skeleton-tag"></view>
            <view class="skeleton-tag"></view>
          </view>
          <view class="skeleton-meta"></view>
        </view>
      </view>
      <!-- 职位列表 -->
      <view v-else-if="error" class="error-state">加载失败: {{ error }}</view>
      <view v-else class="job-list">
        <view v-if="filteredJobs.length === 0" class="empty-state">
          <view class="empty-icon">📋</view>
          <view class="empty-text">暂时没有符合条件的岗位，换个筛选试试吧~</view>
          <button class="reset-btn" @click="resetFilters">重置筛选</button>
        </view>
        <view v-for="(job, idx) in filteredJobs" :key="idx" class="job-card" @click="goToJobDetail(job.id)">
          <view class="job-title-row">
            <text class="job-title">{{ job.title }}</text>
            <text class="job-salary">{{ job.salary }}</text>
          </view>
          <view class="job-company-row">
            <text class="company">{{ job.company }}</text>
            <text class="tag" v-for="(tag, i) in job.tags" :key="i">{{ tag }}</text>
          </view>
          <view class="job-meta">
            <text class="meta">{{ job.date }}</text>
            <text class="meta">{{ job.location }}</text>
            <text class="meta">{{ job.views }}看过</text>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 底部导航栏 -->
    <view class="tabbar">
      <view v-for="(item, index) in tabbar" :key="index" class="tab" :class="{ active: activeTab === index }" @click="changeTab(index)">
        <image class="tab-icon" :src="activeTab === index ? item.selectedIconPath : item.iconPath"></image>
        <text class="tab-label">{{ item.text }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      topTabActive: 0, // 0 for 查岗位, 1 for 找名企
      filterActive: 0,
      jobs: [], // 由接口或mock赋值
      jobTypeTabsRaw: [], // 由接口或mock赋值
      isLoading: false, //不再需要加载状态
      error: null,
      activeTab: 0,
      tabbar: [
        {
          text: '找工作',
          iconPath: '/static/zhaogongzuo0.png',
          selectedIconPath: '/static/zhaogongzuo1.png'
        },
        {
          text: 'AI面试',
          iconPath: '/static/lianmianshi0.png',
          selectedIconPath: 'static/lianmianshi1.png'
        },
        {
          text: '我的',
          iconPath: '/static/wode0.png',
          selectedIconPath: '/static/wode1.png'
        }
      ],
      subFilters: [
        {
          key: 'city',
          label: '城市',
          options: ['不限', '北京', '上海', '深圳', '广州']
        },
        {
          key: 'degree',
          label: '学历',
          options: ['不限', '本科', '硕士', '博士']
        },
        {
          key: 'exp',
          label: '经验',
          options: ['不限', '应届', '1-3年', '3-5年']
        },
        {
          key: 'salary',
          label: '薪资',
          options: ['不限', '5k-10k', '10k-20k', '20k+']
        }
      ],
      subFilterSelected: {
        city: '不限',
        degree: '不限',
        exp: '不限',
        salary: '不限'
      },
      subFilterVisible: '', // 当前显示下拉的key
      isRefreshing: false, // 下拉刷新状态
      refreshText: '', // 刷新提示文案
      // mock location数据，支持有省份和仅有城市两种情况
      locationData: [
        { province: '广东', cities: ['广州', '深圳', '珠海'] },
        { province: '北京', cities: ['北京'] },
        { province: '上海', cities: ['上海'] },
        { province: '江苏', cities: ['南京', '苏州', '无锡'] },
        { province: '四川', cities: ['成都', '绵阳', '乐山', '自贡'] },
        { province: '山东', cities: ['济南', '青岛', '烟台', '潍坊'] },
        { province: '河南', cities: ['郑州', '洛阳', '开封', '新乡'] },
        { province: '辽宁', cities: ['沈阳', '大连', '鞍山', '本溪'] },
        { province: '福建', cities: ['福州', '厦门', '泉州', '漳州'] },
		{ province: '江苏', cities: ['南京', '苏州', '无锡'] },
		{ province: '西川', cities: ['成都', '绵阳', '乐山', '自贡'] },
		{ province: '南东', cities: ['济南', '青岛', '烟台', '潍坊'] },
		{ province: '海南', cities: ['郑州', '洛阳', '开封', '新乡'] },
		{ province: '宁德', cities: ['沈阳', '大连', '鞍山', '本溪'] },
		{ province: '福建', cities: ['福州', '厦门', '泉州', '漳州'] },
        // 仅有城市的情况：
        // '成都', '重庆', '杭州'
      ].map(item => {
        if (typeof item === 'object' && item.province) {
          return {
            province: item.province === '全部' ? '全部' : item.province,
            cities: item.cities.map(city => city === '全部' ? '全部' : city)
          };
        } else if (typeof item === 'string') {
          return item === '全部' ? '全部' : item;
        }
        return item;
      }),
      cityPopupVisible: false,
      selectedProvince: '',
      selectedCities: [],
      educationData: ['不限', '大专', '本科', '硕士', '博士'],
      experienceData: ['不限', '应届', '1-3年', '3-5年', '5年以上'],
      salaryData: ['不限', '5k-10k', '10k-20k', '20k+'],
      educationPopupVisible: false,
      experiencePopupVisible: false,
      salaryPopupVisible: false,
      selectedEducations: [],
      selectedExperiences: [],
      selectedSalaries: [],
      activeJobType: '全部',
      kingkongList: [
        { icon: '/static/xyzp1.png', text: '校园招聘' },
        { icon: '/static/shzp1.png', text: '社会招聘' },
        { icon: '/static/sybz1.png', text: '事业编制' },
        { icon: '/static/xysx1.png', text: '校园实习' },
        { icon: '/static/rmjz1.png', text: '热门兼职' },
      ],
      // 添加滑动手势相关数据
      touchStartTime: 0,
      touchStartX: 0,
      touchStartY: 0,
      touchEndTime: 0,
      touchEndX: 0,
      touchEndY: 0,
      swipeThreshold: 100, // 滑动距离阈值
      swipeDuration: 500, // 滑动时间阈值
    }
  },
  onLoad() {
    this.fetchJobsAndTabs();
  },
  mounted() {
    this.topTabActive = 0;
  },
  methods: {
    handleKingkongClick(type) {
      switch(type) {
        case '校园招聘':
          uni.navigateTo({
            url: '/pages/campus-jobs/index'
          });
          break;
        case '社会招聘':
          uni.navigateTo({
            url: '/pages/social-jobs/index'
          });
          break;
        case '事业编制':
          uni.navigateTo({
            url: '/pages/career-jobs/index'
          });
          break;
        case '校园实习':
          uni.navigateTo({
            url: '/pages/intern-jobs/index'
          });
          break;
        case '热门兼职':
          uni.navigateTo({
            url: '/pages/part-time-jobs/index'
          });
          break;
        case '联系我们':
        case '求职交流':
        case '面试官交流':
          uni.navigateTo({
            url: '/pages/assistant/index'
          });
          break;
      }
    },
    async fetchJobsAndTabs() {
      this.isAAALoading = true;
      this.error = null;
      try {
        // 假设接口返回 { jobs: [...], jobTypeTabs: [{ name, priority }] }
        const res = await uni.request({
          url: 'https://api.example.com/jobs-and-tabs', // 替换为真实接口
          method: 'GET'
        });
        if (res[1] && res[1].statusCode === 200 && res[1].data) {
          this.jobs = res[1].data.jobs || [];
          this.jobTypeTabsRaw = res[1].data.jobTypeTabs || [];
        } else {
          throw new Error('网络请求失败');
        }
      } catch (e) {
        // mock数据
        this.jobs = [
          {
            id: 'job1',
            title: '小红书-用户产品经理 (示例)',
            salary: '18-42k*16',
            company: '掌阅科技',
            tags: ['文娱', '999人', '2025届'],
            date: '2025-4',
            location: '北京石景山',
            views: 450,
            jobType: ['IT/互联网'],
            experience: '1-3年',
            education: '本科'
          },
          {
            id: 'job2',
            title: '字节跳动-前端开发工程师',
            salary: '25-50k*15',
            company: '抖音',
            tags: ['互联网', '10000人以上', '2025届', 'React', 'Node.js'],
            date: '2025-5',
            location: '天津',
            views: 1280,
            jobType: ['IT/互联网'],
            experience: '3-5年',
            education: '硕士'
          },
          {
            id: 'job3',
            title: '腾讯-游戏策划',
            salary: '15-30k*16',
            company: '天美工作室群',
            tags: ['游戏', '5000人', '2025届', '王者荣耀'],
            date: '2025-5',
            location: '深圳南山',
            views: 980,
            jobType: ['游戏'],
            experience: '应届',
            education: '本科'
          },
          {
            id: 'job4',
            title: '阿里巴巴-Java后端开发',
            salary: '22-45k*16',
            company: '阿里云',
            tags: ['云计算', '10000人以上', 'P6', '分布式'],
            date: '2025-4',
            location: '浙江杭州',
            views: 1500,
            jobType: ['IT/互联网'],
            experience: '5年以上',
            education: '博士'
          },
          {
            id: 'job5',
            title: '中芯国际-芯片设计工程师',
            salary: '20-40k*14',
            company: '中芯国际',
            tags: ['半导体', '5000人', 'P6', '芯片设计'],
            date: '2025-4',
            location: '上海浦东',
            views: 800,
            jobType: ['半导体'],
            experience: '3-5年',
            education: '本科'
          },
          {
            id: 'job6',
            title: '华为-5G通信工程师',
            salary: '25-50k*16',
            company: '华为技术',
            tags: ['通信', '10000人以上', 'P6', '5G'],
            date: '2025-4',
            location: '深圳龙岗',
            views: 1200,
            jobType: ['IT/互联网'],
            experience: '3-5年',
            education: '本科'
          },
          {
            id: 'job7',
            title: '网易-游戏客户端开发',
            salary: '18-35k*15',
            company: '网易游戏',
            tags: ['游戏', '5000人', 'Unity', 'C++'],
            date: '2025-5',
            location: '广州天河',
            views: 650,
            jobType: ['游戏'],
            experience: '1-3年',
            education: '本科'
          },
          {
            id: 'job8',
            title: '台积电-工艺工程师',
            salary: '15-30k*14',
            company: '台积电',
            tags: ['半导体', '10000人以上', '工艺', '制造'],
            date: '2025-4',
            location: '南京江北',
            views: 450,
            jobType: ['半导体'],
            experience: '3-5年',
            education: '本科'
          },
          {
            id: 'job9',
            title: '美团-算法工程师',
            salary: '30-60k*16',
            company: '美团',
            tags: ['互联网', '10000人以上', 'AI', '机器学习'],
            date: '2025-5',
            location: '北京朝阳',
            views: 1800,
            jobType: ['IT'],
            experience: '5年以上',
            education: '博士'
          },
          {
            id: 'job10',
            title: '紫光展锐-IC设计工程师',
            salary: '18-35k*14',
            company: '紫光展锐',
            tags: ['半导体', '3000人', 'IC设计', '数字电路'],
            date: '2025-4',
            location: '上海张江',
            views: 320,
            jobType: ['半导体'],
            experience: '1-3年',
            education: '硕士'
          },
          {
            id: 'job11',
            title: '紫光展锐-IC设计工程师',
            salary: '18-35k*14',
            company: '紫光展锐',
            tags: ['半导体', '3000人', 'IC设计', '数字电路'],
            date: '2025-4',
            location: '上海张江',
            views: 320,
            jobType: ['导体'],
            experience: '不限',
            education: '不限'
          }
        ];
        this.jobTypeTabsRaw = [
          { name: 'IT/互联网', priority: 2 },
          { name: '游戏', priority: 3 },
          { name: '半导体', priority: 1 },
          { name: 'IT', priority: 4 },
          { name: '导体', priority: 5 }
        ];
      } finally {
        this.isLoading = false;
      }
    },
    changeTab(index) {
      this.activeTab = index;
      // 这里可以根据 index 执行不同的跳转或逻辑
      if (index === 1) {
        uni.redirectTo({ url: '/pages/ai-chat/index?from=home' });
      } else if (index === 2) {
        uni.redirectTo({ url: '/pages/index/my' });
      }
    },
    navigateToSearch() {
      uni.navigateTo({
        url: '/pages/search/index' // 假设搜索页面的路径
      });
    },
    navigateToAIChat() {
      uni.navigateTo({
        url: '/pages/ai-chat/index2'
      });
    },
    navigateToFeature(url) {
      if (!url) return;
      uni.navigateTo({
        url: url
      });
    },
    toggleSubFilter(key) {
      this.subFilterVisible = this.subFilterVisible === key ? '' : key;
    },
    selectSubFilter(key, value) {
      this.subFilterSelected[key] = value;
      this.subFilterVisible = '';
    },
    openCityPopup() {
      this.cityPopupVisible = true;
      // 判断是否有省份
      if (Array.isArray(this.locationData) && typeof this.locationData[0] === 'object' && this.locationData[0].province) {
        this.selectedProvince = this.locationData[0].province;
      } else {
        this.selectedProvince = '';
      }
    },
    closeCityPopup() {
      this.cityPopupVisible = false;
    },
    selectAllProvince() {
      this.selectedProvince = '城市';
    },
    selectProvince(province) {
      if (province === '全部') {
        this.selectedProvince = '全部';
      } else {
        this.selectedProvince = province;
      }
    },
    toggleAllCities() {
      if (this.selectedCities.includes('全部城市')) {
        this.selectedCities = [];
      } else {
        this.selectedCities = ['全部城市'];
      }
    },
    toggleCity(city) {
      if (this.selectedCities.includes('全部城市')) {
        this.selectedCities = [];
      }
      const idx = this.selectedCities.indexOf(city);
      if (idx > -1) {
        this.selectedCities.splice(idx, 1);
      } else {
        this.selectedCities.push(city);
      }
    },
    confirmCity() {
      if (this.selectedCities.includes('全部城市')) {
        this.subFilterSelected.city = '全部城市';
      } else if (this.selectedCities.length === 1) {
        this.subFilterSelected.city = this.selectedCities[0];
      } else if (this.selectedCities.length > 1) {
        this.subFilterSelected.city = `城市·${this.selectedCities.length}`;
      } else {
        this.subFilterSelected.city = '不限';
      }
      this.closeCityPopup();
    },
    cityBtnText() {
      // 省份为全部 且 城市为全部城市 或未选中，显示"全部"
      if (
        this.selectedProvince === '全部' &&
        (this.selectedCities.includes('全部城市') || this.selectedCities.length === 0)
      ) {
        return '全部';
      }
      // 选中某省份的全部城市
      if (this.selectedCities.includes('全部城市')) {
        return '全部';
      }
      // 选中某省份的多个城市
      if (this.selectedCities.length > 1) {
        return `城市·${this.selectedCities.length}`;
      }
      // 选中某省份的单个城市
      if (this.selectedCities.length === 1) {
        return this.selectedCities[0];
      }
      // 默认
      return '城市';
    },
    clearCity() {
      this.selectedCities = [];
    },
    openEducationPopup() { this.educationPopupVisible = true; },
    closeEducationPopup() { this.educationPopupVisible = false; },
    toggleEducation(item) {
      if (item === '不限') {
        this.selectedEducations = ['不限'];
      } else {
        const idx = this.selectedEducations.indexOf(item);
        if (this.selectedEducations.includes('不限')) {
          this.selectedEducations = [item];
        } else if (idx > -1) {
          this.selectedEducations.splice(idx, 1);
        } else {
          this.selectedEducations.push(item);
        }
      }
    },
    confirmEducation() {
      if (this.selectedEducations.length === 1) {
        this.subFilterSelected.degree = this.selectedEducations[0];
      } else if (this.selectedEducations.length > 1) {
        this.subFilterSelected.degree = `学历·${this.selectedEducations.length}`;
      } else {
        this.subFilterSelected.degree = '学历';
      }
      this.closeEducationPopup();
    },
    clearEducation() { this.selectedEducations = []; },

    openExperiencePopup() { this.experiencePopupVisible = true; },
    closeExperiencePopup() { this.experiencePopupVisible = false; },
    toggleExperience(item) {
      if (item === '不限') {
        this.selectedExperiences = ['不限'];
      } else {
        const idx = this.selectedExperiences.indexOf(item);
        if (this.selectedExperiences.includes('不限')) {
          this.selectedExperiences = [item];
        } else if (idx > -1) {
          this.selectedExperiences.splice(idx, 1);
        } else {
          this.selectedExperiences.push(item);
        }
      }
    },
    confirmExperience() {
      if (this.selectedExperiences.length === 1) {
        this.subFilterSelected.exp = this.selectedExperiences[0];
      } else if (this.selectedExperiences.length > 1) {
        this.subFilterSelected.exp = `经验·${this.selectedExperiences.length}`;
      } else {
        this.subFilterSelected.exp = '经验';
      }
      this.closeExperiencePopup();
    },
    clearExperience() { this.selectedExperiences = []; },

    openSalaryPopup() { this.salaryPopupVisible = true; },
    closeSalaryPopup() { this.salaryPopupVisible = false; },
    toggleSalary(item) {
      if (item === '不限') {
        this.selectedSalaries = ['不限'];
      } else {
        const idx = this.selectedSalaries.indexOf(item);
        if (this.selectedSalaries.includes('不限')) {
          this.selectedSalaries = [item];
        } else if (idx > -1) {
          this.selectedSalaries.splice(idx, 1);
        } else {
          this.selectedSalaries.push(item);
        }
      }
    },
    confirmSalary() {
      if (this.selectedSalaries.length === 1) {
        this.subFilterSelected.salary = this.selectedSalaries[0];
      } else if (this.selectedSalaries.length > 1) {
        this.subFilterSelected.salary = `薪资·${this.selectedSalaries.length}`;
      } else {
        this.subFilterSelected.salary = '薪资';
      }
      this.closeSalaryPopup();
    },
    clearSalary() { this.selectedSalaries = []; },
    selectAllCities() {
      this.selectedCities = [];
    },
    resetFilters() {
      this.selectedCities = [];
      this.selectedEducations = [];
      this.selectedExperiences = [];
      this.selectedSalaries = [];
      this.subFilterSelected = {
        city: '不限',
        degree: '不限',
        exp: '不限',
        salary: '不限'
      };
      this.activeJobType = '全部';
    },
    toggleSelectAllCities() {
      if (this.isAllCitiesSelected) {
        this.selectedCities = [];
      } else {
        this.selectedCities = [...this.currentProvinceCities];
      }
    },
    // 滑动手势处理
    touchStart(e) {
      this.touchStartTime = Date.now();
      this.touchStartX = e.touches[0].clientX;
      this.touchStartY = e.touches[0].clientY;
    },
    
    touchMove(e) {
      // 阻止默认滚动行为，避免与页面滚动冲突
      // e.preventDefault();
    },
    
    touchEnd(e) {
      this.touchEndTime = Date.now();
      this.touchEndX = e.changedTouches[0].clientX;
      this.touchEndY = e.changedTouches[0].clientY;
      
      this.handleSwipeGesture();
    },
    
    handleSwipeGesture() {
      const deltaX = this.touchEndX - this.touchStartX;
      const deltaY = this.touchEndY - this.touchStartY;
      const deltaTime = this.touchEndTime - this.touchStartTime;
      
      // 判断是否为有效的滑动手势
      if (Math.abs(deltaX) > Math.abs(deltaY) && 
          Math.abs(deltaX) > this.swipeThreshold && 
          deltaTime < this.swipeDuration) {
        
        // 右滑动 - 切换到查岗位
        if (deltaX > 0 && this.topTabActive === 1) {
          this.goToTab(0);
        }
        // 左滑动 - 切换到找名企
        else if (deltaX < 0 && this.topTabActive === 0) {
          this.goToTab(1);
        }
      }
    },
    
    goToTab(tabIdx) {
      if (tabIdx === 0) {
        uni.redirectTo({ url: '/pages/home/index' });
      } else if (tabIdx === 1) {
        uni.redirectTo({ url: '/pages/home/index2' });
      }
    },
    goToJobDetail(id) {
      if (!id) return;
      uni.navigateTo({
        url: `/pages/job-detail/index?id=${id}`
      });
    },
    // 下拉刷新处理
    async onRefresh() {
      this.isRefreshing = true;
      this.refreshText = '已为您刷新最新岗位';
      
      // 显示刷新提示
      uni.showToast({
        title: this.refreshText,
        icon: 'none',
        duration: 1500
      });
      
      try {
        // 重新请求数据
        await this.fetchJobsAndTabs();
        
        // 模拟网络延迟，确保用户能看到刷新效果
        await new Promise(resolve => setTimeout(resolve, 800));
      } catch (error) {
        console.error('刷新失败:', error);
        uni.showToast({
          title: '刷新失败，请重试',
          icon: 'none',
          duration: 1500
        });
      } finally {
        this.isRefreshing = false;
      }
    },
    onRefreshRestore() {
      this.isRefreshing = false;
    },
    isTabExpanded(key) {
      if (key === 'city') return this.cityPopupVisible;
      if (key === 'degree') return this.educationPopupVisible;
      if (key === 'exp') return this.experiencePopupVisible;
      if (key === 'salary') return this.salaryPopupVisible;
      return this.subFilterVisible === key;
    },
  },
  computed: {
    filteredJobs() {
      return this.jobs.filter(job => {
        // 一级筛选
        const jobTypeMatch = this.activeJobType === '全部' || (job.jobType && job.jobType.includes(this.activeJobType));
        // 二级筛选
        const cityKey = this.subFilterSelected.city;
        const degreeKey = this.subFilterSelected.degree;
        const expKey = this.subFilterSelected.exp;
        const salaryKey = this.subFilterSelected.salary;

        const cityMatch =
          cityKey === '不限' ||
          cityKey === '全部城市' ||
          cityKey === '城市' ||
          (cityKey && job.location && job.location.includes(cityKey)) ||
          (!cityKey || cityKey === '城市');
        const educationMatch =
          degreeKey === '不限' ||
          degreeKey === '学历' ||
          (degreeKey && job.education && (degreeKey.includes('学历·') || degreeKey === job.education));
        const experienceMatch =
          expKey === '不限' ||
          expKey === '经验' ||
          (expKey && job.experience && (expKey.includes('经验·') || expKey === job.experience));
        const salaryMatch =
          salaryKey === '不限' ||
          salaryKey === '薪资' ||
          (salaryKey && job.salary && (salaryKey.includes('薪资·') || salaryKey === job.salary));
        return jobTypeMatch && cityMatch && educationMatch && experienceMatch && salaryMatch;
      });
    },
    jobTypeTabs() {
      // 以 priority 降序排序，全部始终在最前
      const sorted = [...this.jobTypeTabsRaw].sort((a, b) => b.priority - a.priority);
      return ['全部', ...sorted.map(item => item.name)];
    },
    sortedLocationData() {
      // 省份和城市按拼音首字母排序，并合并同名省份
      if (Array.isArray(this.locationData) && typeof this.locationData[0] === 'object' && this.locationData[0].province) {
        // 合并同名省份
        const provinceMap = {};
        this.locationData.forEach(item => {
          if (!provinceMap[item.province]) {
            provinceMap[item.province] = new Set(item.cities);
          } else {
            item.cities.forEach(city => provinceMap[item.province].add(city));
          }
        });
        // 转为数组并排序
        return Object.keys(provinceMap)
          .map(province => ({
            province,
            cities: Array.from(provinceMap[province]).sort((a, b) => a.localeCompare(b, 'zh', {sensitivity: 'base'}))
          }))
          .sort((a, b) => a.province.localeCompare(b.province, 'zh', {sensitivity: 'base'}));
      } else if (Array.isArray(this.locationData)) {
        // 仅有城市
        return [...new Set(this.locationData)].sort((a, b) => a.localeCompare(b, 'zh', {sensitivity: 'base'}));
      }
      return this.locationData;
    },
    currentProvinceCities() {
      if (Array.isArray(this.sortedLocationData) && typeof this.sortedLocationData[0] === 'object' && this.sortedLocationData[0].province) {
        return (this.sortedLocationData.find(i => i.province === this.selectedProvince)?.cities) || [];
      }
      return [];
    },
    isAllCitiesSelected() {
      return this.currentProvinceCities.length > 0 &&
        this.currentProvinceCities.every(city => this.selectedCities.includes(city));
    },
  }
}
</script>

<style scoped>
.page-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: linear-gradient(
    180deg,
    #F0FDF8 0%,      /* 顶部非常浅的青绿色，几乎是白色 */
    #E6FAF5 20%,      /* 稍微深一点的浅青绿色 */
    #D0F0EE 50%,      /* 中间的柔和青绿色 */
    #E8F5E4 80%,      /* 再次变浅，偏黄的浅绿色 */
    #F8FBF8 95%,      /* 接近纯白色的极浅绿 */
    #FFFFFF 100%     /* 纯白，确保与卡片区域完美衔接 */
  );
}

/* 微信小程序兼容性：固定背景 */
/* #ifdef MP-WEIXIN */
.page-container {
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}
/* #endif */
.fixed-header {
  z-index: 100;
  background: transparent;
  padding-bottom: 16rpx; /* 调整吸顶区域与下方内容的间距 */
}
.scrollable-content {
  flex: 1;
  height: 100%;
  background: transparent;
}
.header {
  padding: 59px 30rpx 32rpx 30rpx; /* 调整顶部距离，使标题腰部中线距离页面顶部128px */
}
.title-row {
  flex-direction: row;
  padding: 0; 
  display: flex;
  align-items: center;
  justify-content: space-between; 
  margin-bottom: 32rpx; /* 调整与搜索框的间距 */
}
.tabs-container {
flex-direction: row;
  display: flex;
  align-items: center;
  height: 50rpx; 
}
.header-actions {
  /* 右侧图标容器样式 */
}
.actions-icon {
  width: 120rpx; /* 根据您的切图调整 */
  height: 50rpx; /* 根据您的切图调整 */
}
.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center; /* 恢复为居中对齐 */
}
.title {
  font-size: 36rpx;
  font-weight: 400;
  color: #888;
  padding-bottom: 8rpx;
}
.title.active {
  font-size: 40rpx;
  font-weight: 700;
  color: #222;
  padding-top: 4rpx;
}
.underline {
  width: 50rpx;
  height: 8rpx;
  background-color: #00b386;
  border-radius: 4rpx;
}
.divider {
  width: 2rpx;
  height: 40rpx;
  background-color: #d8d8d8;
  margin: 0 32rpx;
}
.search-bar {
  flex-direction:row;
  place-items: center;
  align-items: left;
  background: #fff;
  border-radius: 44rpx;
  padding: 0 40rpx;
  height: 72rpx;
  border: 1rpx solid #f0f0f0;
  flex: 1;
  box-sizing: border-box;
}
.search-icon {
  width: 32rpx;
  height: 32rpx;
  margin-right: 16rpx;
  }
.search-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 0 20rpx 20rpx -10rpx;
  gap: 20rpx;
  width: calc(100vw - 40rpx);
  box-sizing: border-box;
}

.ai-entry-outside {
  width: 72rpx;
  height: 72rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #00b386;
  border-radius: 50%;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.ai-entry-outside:active {
  transform: scale(0.95);
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
}

.ai-entry-icon {
  width: 48rpx;
  height: 48rpx;
  border-radius: 50%;
  filter: brightness(0) invert(1);
}
.search-input {
  border: none;
  outline: none;
  font-size: 15px;
  flex: 1;
  background: transparent;
  pointer-events: none; /* 让点击事件穿透到父元素 */
  text-align: left; /* 确保文案左对齐 */
}
.search-input::placeholder {
  color: #bbb;
}
.filter-row {
  height:60rpx;
  flex-direction: row;
  display: flex;
  margin: 0 20rpx;
  /* 统一水平边距 */
  overflow: hidden;
  width: calc(100vw - 40rpx);
  max-width: calc(100vw - 40rpx);
}
.filter-scroll-row {
  display: flex;
  flex-direction: row;
  width: 100%;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
}
.filter-scroll-row::-webkit-scrollbar {
  display: none;
}
.filter-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56rpx;
  line-height: 56rpx;
  padding: 0 36rpx; /* 统一内边距 */
  border-radius: 32rpx; /* 更大的圆角 */
  background: #fff; /* 白底 */
  color: #666; /* 灰色字 */
  font-size: 28rpx;
  font-weight: 500;
  margin-right: 16rpx;
  margin-bottom: 8rpx; /* 增加下边距以缩短与二级筛选的间距 */
  white-space: nowrap;
  flex-shrink: 0;
  box-sizing: border-box;
  border: 2rpx solid #e6e6e6; /* 灰色描边 */
  box-shadow: none;
  transition: all 0.2s;
}
.filter-btn.active {
  background: #fff; /* 白底 */
  color: #00b386; /* 绿色字 */
  border: 2rpx solid #00b386; /* 绿色描边 */
  font-weight: 700;
  box-shadow: 0 2rpx 8rpx rgba(0,179,134,0.08); /* 轻微阴影 */
}
.loading-state, .error-state, .empty-state {
  text-align: center;
  color: #999;
  margin-top: 100rpx;
  font-size: 28rpx;
}
.job-list {
  margin: 0 20rpx; /* 统一水平边距，移除顶部间距 */
  padding-bottom: 140rpx;
}
.job-card {
  background: #fff;
  border-radius: 24rpx; /* 统一为20rpx */
  box-shadow: 0 4rpx 24rpx rgba(0,0,0,0.06); /* 更柔和阴影 */
  padding: 32rpx 24rpx;
  margin-bottom: 24rpx;
  border: 1rpx solid #f2f2f2; /* 移除边框，或更淡的边框 */
}
.job-title-row {
  flex-direction: row;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.job-title {
  font-size: 32rpx;
  font-weight: 700;
  color: #222;
}
.job-salary {
  color: #ff2d2d;
  font-size: 32rpx;
  font-weight: 700;
}
.job-company-row {
 flex-direction: row;
  display: flex;
  align-items: center;
  margin: 16rpx 0;
}
.company {
  color: #666;
  font-size: 26rpx;
  margin-right: 16rpx;
}
.job-recruit-type {
  font-size: 22rpx;
  color: #00b386;
  background: #e6faf5;
  border-radius: 999rpx; /* 统一为999rpx */
  padding: 8rpx 24rpx; /* 统一padding */
  font-weight: 500;
  margin-left: 0;
  display: inline-block; /* 保持一致 */

}
.tag {
  background: #f2f2f2;
  flex-direction: row;
  place-items: center;
  color: #666; /* 统一为深色 */
  font-size: 22rpx;
  border-radius: 999rpx; /* 统一为999rpx */
  padding: 8rpx 24rpx; /* 统一padding */
  margin-right: 12rpx;
  display: inline-block; /* 保持一致 */
}
.job-tags {
  margin-bottom: 8rpx;
}
.job-tag {
  color: #00b386;
  font-size: 22rpx;
  margin-right: 12rpx;
}
.job-meta {
  flex-direction: row;
  color: #bbb;
  font-size: 22rpx;
  display: flex;
  gap: 24rpx;
}
.tabbar {
  margin-bottom: 0rpx;
  flex-direction: row;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 16rpx;
  height: 112rpx;
  background: rgba(255,255,255,0.95); /* 增加透明度以替代backdrop-filter效果 */
  display: flex;
  justify-content: space-around;
  align-items: center;
  /* 更强的悬浮阴影效果 */
  box-shadow: 0 12rpx 36rpx 0 rgba(0,0,0,0.18), 0 2rpx 8rpx 0 rgba(0,0,0,0.08);
  border-radius: 24rpx;
  margin-left: 18rpx;
  margin-right: 18rpx;
  width: calc(100vw - 36rpx);
  z-index: 999;
  border: none;
}
.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #888;
  font-size: 22rpx;
  flex: 1;
  justify-content: center;
  padding: 0;
  gap: 4rpx;
}
.tab.active {
  color: #00b386;
}
.tab-icon {
  width: 44rpx;
  height: 44rpx;
  margin-bottom: 0;
}
.tab-label {
  font-size: 20rpx;
  margin-top: 0;
}
.sub-filter-row {
  flex-direction: row;
  display: flex;
  align-items: center;
  margin: 4rpx 0 8rpx 0; /* 缩短与一级筛选的间距 */
  background: transparent !important; /* 彻底透明背景 */
  border-radius: 0; /* 移除圆角 */
  box-shadow: none; /* 移除阴影 */
  padding: 0 16rpx; /* 统一内边距 */
  gap: 16rpx;
  height: auto;
  position: relative;
  z-index: 2;
  color: #444; /* 恢复颜色 */
}
.sub-filter-btn {
  flex: 1;
  font-size: 30rpx;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
  height: 40rpx;
  color: #888;
  border-radius: 20rpx;
  position: relative;
  padding: 0 12rpx;
  margin: 0;
  transition: background 0.2s, color 0.2s;
  box-sizing: border-box;
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
}
.sub-filter-btn.selected,
.sub-filter-btn.expanded {
  color: #00b386 !important;
  font-weight: 700 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
.sub-filter-btn .arrow {
  font-size: 16rpx;
  margin-left: 6rpx;
  color: #bbb;
  transition: color 0.2s;
}
.sub-filter-btn.selected .arrow,
.sub-filter-btn.expanded .arrow {
  color: #00b386 !important;
  font-weight: 700 !important;
}
.sub-filter-dropdown {
  position: absolute;
  top: 44rpx;
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.08);
  z-index: 10;
  padding: 8rpx 0;
}
.dropdown-option {
  padding: 16rpx 0;
  text-align: center;
  color: #333;
  font-size: 26rpx;
}
.city-popup-mask {
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.3);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.city-popup {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  max-width: 100vw;
  background: #fff;
  border-radius: 20rpx 20rpx 0 0;
  padding: 0;
  box-sizing: border-box;
  max-height: 70vh;
  overflow: hidden;
  z-index: 1001;
}
.city-popup-bottom {
  animation: popupSlideUp 0.3s;
}
@keyframes popupSlideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.city-popup-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx 32rpx 0 32rpx;
}
.city-popup-title {
  font-size: 32rpx;
  font-weight: 700;
}
.city-popup-close {
  font-size: 40rpx;
  color: #bbb;
  cursor: pointer;
  font-weight: 400;
  line-height: 1;
}
.city-popup-content {
  display: flex;
  flex-direction: row;
  min-height: 120rpx;
  max-height: calc(70vh - 96rpx);
  overflow-y: auto;
  margin-top: 24rpx;
  padding-bottom: 96rpx;
}
.province-list {
  width: 180rpx;
  border-right: 1rpx solid #eee;
  overflow-y: auto;
  background: #f7f8fa;
}
.province-item {
  padding: 24rpx 0;
  text-align: center;
  color: #666;
  cursor: pointer;
  font-size: 28rpx;
  transition: background 0.2s, color 0.2s;
}
.province-item.active {
  color: #222;
  font-weight: 700;
  background: #fff;
}
.city-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: #fff;
}
.city-item {
  flex-direction: row;
  place-items: center;
  padding: 24rpx 0;
  text-align: center;
  color: #666;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  transition: background 0.2s, color 0.2s;
}
.city-item.active {
  color: #00b386;
  font-weight: 700;
  background: #e6faf5;
}
.city-item-check {
  font-size: 22rpx;
  color: #00b386;
  margin-left: 8rpx;
}
.city-popup-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 32rpx 40rpx 32rpx;
  background: #fff;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  border-top: 20rpx solid #ffffff;
  min-height: 80rpx;
  gap: 24rpx;
  z-index: 2;
}
.city-popup-clear {
  flex-direction: row;
place-items: center;
  background: #fff;
  color: #888;
  border: 1rpx solid #ccc;
  border-radius: 16rpx;
  padding: 0 60rpx;
  height: 64rpx;
  font-size: 30rpx;
  margin-bottom: 0;
  cursor: pointer;
  transition: border 0.2s, color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.city-popup-clear:disabled {
  color: #ccc;
  border-color: #eee;
  cursor: not-allowed;
}
.city-popup-confirm {
  background: #00b386;
  color: #fff;
  border: none;
  border-radius: 16rpx;
  padding: 0 200rpx;
  height: 64rpx;
  font-size: 30rpx;
  margin-left: 0;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.city-popup-confirm:disabled {
  background: #ccc;
  color: #fff;
}
.popup-content-center {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 32rpx 0 0 0;
  min-height: 120rpx;
  max-height: 60vh;
  overflow-y: auto;
  gap: 24rpx 32rpx;
}
.center-item {
  min-width: 120rpx;
  padding: 16rpx 32rpx;
  border-radius: 32rpx;
  background: none;
  color: #666;
  font-size: 28rpx;
  text-align: center;
  margin-bottom: 12rpx;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  font-weight: 400;
}
.center-item.active {
  color: #00b386;
  font-weight: 700;
}
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 60rpx;
  color: #97a3af;
  font-size: 28rpx;
}
.empty-icon {
  font-size: 80rpx;
  margin-bottom: 24rpx;
  opacity: 0.6;
}
.empty-text {
  margin-bottom: 24rpx;
  font-size: 24rpx;
  color: #97a3af;
}
.reset-btn {
  background: #05a723;
  color: #fff;
  border: none;
  border-radius: 32rpx;
  padding: 0 40rpx;
  height: 44rpx;
  font-size: 24rpx;
  margin-bottom: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.city-select-all-btn {
  background: none;
  color: #00b386;
  border: none;
  font-size: 28rpx;
  cursor: pointer;
}
.tab-item.active .title {
  font-size: 40rpx;
  font-weight: 700;
  color: #222;
}
.tab-item .title {
  font-size: 36rpx;
  font-weight: 400;
  color: #888;
}
/* 骨架屏样式 */
.skeleton-list {
  margin: 0 30rpx;
  padding-bottom: 140rpx;
}
.skeleton-card {
  background: #f6f7f9;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
  padding: 32rpx 24rpx;
  margin-bottom: 24rpx;
  animation: skeleton-loading 1.2s infinite linear;
}
.skeleton-title {
  width: 60%;
  height: 32rpx;
  background: #eaeaea;
  border-radius: 8rpx;
  margin-bottom: 24rpx;
}
.skeleton-row {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}
.skeleton-company {
  width: 80rpx;
  height: 26rpx;
  background: #eaeaea;
  border-radius: 8rpx;
  margin-right: 16rpx;
}
.skeleton-tag {
  width: 48rpx;
  height: 22rpx;
  background: #eaeaea;
  border-radius: 8rpx;
  margin-right: 8rpx;
}
.skeleton-meta {
  width: 40%;
  height: 22rpx;
  background: #eaeaea;
  border-radius: 8rpx;
}
@keyframes skeleton-loading {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}
.kingkong-bar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border-radius: 20rpx;
  margin: 0 20rpx 32rpx 20rpx; /* 修改上边距为0，与页面整体间距保持一致 */
  padding: 24rpx 0;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.08);
}
.kingkong-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.iconfont {
  font-size: 56rpx;
  color: #00b386;
  margin-bottom: 12rpx;
}
.kingkong-text {
  font-size: 24rpx;
  color: #333;
  margin-top: 4rpx;
}
.kingkong-img {
  width: 81rpx;
  height: 81rpx;
  margin-bottom: 12rpx;
  object-fit: contain; /* 确保图片保持比例且完整显示 */
}
</style>
